import Vue from 'vue'
import Vuex from 'vuex'
import { loginApi } from '@/api'

Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    // token: '',
    // refresh_token: ''
    token: localStorage.getItem('token') || '', // 前面有值用前面的, 前面要是null, 就用后面的
    refresh_token: localStorage.getItem('refresh_token') || ''
  },
  mutations: {
    // 修改state中的token
    setToken (state, token) {
      state.token = token
      // 将token存储到本地
      localStorage.setItem('token', token)

      // 【本地存储包括面试题】 localStorage sessionStorage Cookie indexDB
      // 他们的共同点都是用来在浏览器中存储数据，都存储到硬盘，vuex存到内存，所以vuex刷新会消失，本地存储则不会
      // 他们都只能存放字符串 如果想要存放对象，通过JSON.stringify进行转换
      // localStorage.setItem('token',JSON.stringify({a:1}))
      // localStorage将数据存放在本地 可以跨页面访问  5M
      // sessionStorage临时会话存储 如果当前页面关闭存储清空 如果同一个网站开了多个标签页可以跨标签页面访问 5M
      // Cookie 浏览器存储的一种 Cookie大小之后4K左右（不同浏览器Cookie的大小也不同）
      // Cookie会随着请求一起发送到后端里面通常存放用户信息用户配置用户token
    },
    setRefreshToken (state, refreshToken) {
      state.refresh_token = refreshToken
      localStorage.setItem('refresh_token', refreshToken)
    }
  },
  actions: {
    // 为什么使用Vuex实现登录功能
    // 正常的企业开发场景会将登录 获取用户信息等功能放在vuex的actions中进行调用
    // token多处多次使用 是一个公共的状态 Vuex更适合公共管理状态
    // 由于vuex状态不能实现刷新保存 所以还需要将token数据存放在本地一份（也许是localsorage,也许是cookie）

    // vuex实现登录页面病保存token的步骤
    // 1.在vuex中的state里定义变量
    // 2.在mutations中定义修改state数据的方法
    // 3.需要在vuex中引入接口（登录接口）
    // 4.在actions中实现接口的调用 同时调用vuex中的mutations中的方法
    // 实现将接口的的返回值存放在vuex的state中
    // 5.在需要调用登录接口的文件中通过mapactions
    // 或者this.$store.dispatch('asyncLoginAction','传入的接口所需参数')
    async asyncLoginAction (store, val) {
      try {
        const res = await loginApi(val)
        const { token, refresh_token } = res.data.data
        store.commit('setToken', token)
        store.commit('setRefreshToken', refresh_token)
        return Promise.resolve(res) // 返回成功的Promise对象
      } catch (err) {
        return Promise.reject(err) // 返回失败的Promise对象
      }
    }
  },
  modules: {
  }
})
